<template>
	<view :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				易付豆
			</view>
			<view class="right" @click="onRight">
				使用记录
			</view>
		</view>
		<view class="balanceBox">

			<view class="balance flex">
				<view class="balanceTop flex-row">
					<image class="bean4" src="http://www.bobei.shop/static/third/bean4.png" mode=""></image>
					<view class="balanceTopText">
						总数量
					</view>
				</view>
				<view class="balanceBom">
					{{ info.credit_3 }}
				</view>
			</view>

			<view class="rechargeBtnBox flex-between">
				<button :plain="true" class="rechargeBtn" @click="goPage('/balance/exchangeWithdraw')">兑换充值</button>
				<button :plain="true" class="rechargeBtn" @click="showTips = true">积分充值</button>
			</view>
		</view>

		<view class="iptBox flex-row">
			<view class="iptTitle">
				账户:
			</view>
			<input v-model="form.account" class="ipt" type="text" placeholder="请输入账户"
				placeholder-style="color: #b6b6b6;font-size: 32rpx;">
		</view>

		<view class="iptBox flex-row">
			<view class="iptTitle">
				数量:
			</view>
			<input v-model="form.amount" class="ipt" type="text" placeholder="请输入数量"
				placeholder-style="color: #b6b6b6;font-size: 32rpx;">
		</view>

		<view class="fee">
			手续费：{{info.transferFeeRate}}%
		</view>

		<view class="completeBtnBox">
			<button class="completeBtn" :plain="true" @click="goSale">
				<view class="lineBox flex">
					<view class="line"></view>
					<view class="line2"></view>
				</view>
				出售
			</button>
			<button class="completeBtn" :plain="true" @click="onTransBtn">
				<view class="lineBox flex">
					<view class="line"></view>
					<view class="line2"></view>
				</view>
				转账
			</button>
		</view>
		<view class="recordBtnBox flex">
			<button class="recordBtn" :plain="true" @click="onRecordBtn">转账记录</button>
		</view>



		<view class="tips flex-row">
			<view class="tipsStar">
				*
			</view>
			<view class="tipsText">
				温馨提示：转账时请认真核实用户信息，确认无误后在进行转账操作。
			</view>
		</view>

		<my-popup-tips :showTips="showTips" :mask="true" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<view class="tipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="amount flex-between">
					<view class="amountL">
						转入数量
					</view>
					<input class="amountR" type="text" placeholder="请输入转入数量" v-model="amount">
				</view>

				<view class="transfe flex-row">
					<view class="transfeL">
						可转入易付豆&nbsp;
					</view>
					<view class="transfeR">
						{{ payway.balance }}
					</view>
				</view>

				<view class="payway">
					<view class="paywayTitle">
						积分选择
					</view>

					<view class="paywayList flex-row">
						<view class="paywayItem flex-row" v-for="item in paywayList" :key="item.id"
							@click="onPaywayItem(item)">

							<view class="paywayItemR">
								<image class="choose" src="http://www.bobei.shop/static/login/choose.png"
									v-if="!item.status"></image>
								<image class="choose" src="http://www.bobei.shop/static/login/choosed.png"
									v-if="item.status"></image>
							</view>
							<view class="paywayItemL">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>

				<view class="gain flex-center">
					可获得易付豆 {{ gain }}
				</view>

				<button :plain="true" class="tipsBtn" @click.stop="onTipsBtn">确定</button>
			</view>
		</my-popup-tips>

		<!-- 密码框 -->
		<my-popup-tips :showTips="passShow" :mask="true" @tipsOpen="passTipsOpen" @tipsClose="passTipsClose">
			<view class="passTipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					<input type="password" class="safeword" v-model="safeword" placeholder="请输入支付密码">
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onPassTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" :disabled="oneClick" @click="onPassTipsSureBtn">确定</button>
				</view>
			</view>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				statusBarHeight: "",
				info: {},
				form: {
					account: "",
					amount: "",
				},

				showTips: false,
				amount: "",
				params: {},
				payway: {
					id: 1,
					title: "转赠积分",
					credit: "credit_7",
					status: true,
					balance: "",
				},
				paywayList: [{
						id: 1,
						title: "转赠积分",
						credit: "credit_7",
						status: true,
						balance: "",
					},
					{
						id: 2,
						title: "普通积分",
						credit: "credit_11",
						status: false,
						balance: "",
					},
				],
				passShow: false,
				safeword: "",
				oneClick: false,
			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.getInfo();
			this.getParams();
		},
		watch: {
			showTips(val) {
				if (!val) {
					this.amount = "";
				}
			},
		},
		computed: {
			gain() {
				var a = parseInt(this.amount * Number(this.params.rate))
				return a;
			}
		},
		methods: {
			onRight() {
				uni.navigateTo({
					url: '/balance/userRecord'
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			onRecordBtn() {
				uni.navigateTo({
					url: '/balance/transRecord'
				})
			},
			passTipsOpen(param) {
				this.passShow = param;
			},
			passTipsClose(param) {
				this.passShow = param;
			},
			onPassTipsCloseBtn() {
				this.passShow = false;
			},
			onTransBtn() {
				if (!this.form.account) {
					uni.showToast({
						title: '请输入账户',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if (!this.form.amount) {
					uni.showToast({
						title: '请输入数量',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				this.passShow = true;
			},
			// 转账
			onPassTipsSureBtn() {
				if (!this.safeword) {
					uni.showToast({
						title: "请输入支付密码",
						icon: "none"
					})
					return;
				}
				this.oneClick = true;
				this.$post({
					module: 'Finance',
					interface: 3000,
					data: {
						account: this.form.account,
						amount: this.form.amount,
						safeword: this.safeword,
					},
				}).then(res => {
					this.passShow = false;
					uni.showToast({
						title: '操作成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						var pages = getCurrentPages(); //获取所有页面的数组对象
						var currPage = pages[pages.length - 1]; //当前页面
						this.oneClick = false;
						uni.redirectTo({
							url: currPage.__page__.fullPath
						})
					}, 1000)
				}).catch(() => {
					this.passShow = false;
					setTimeout(() => {
						this.oneClick = false;
					},1000)
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			getInfo() {
				this.$post({
					module: 'User',
					interface: 1000,
				}).then(res => {
					this.info = res;
					this.payway.balance = res[this.payway.credit];
					this.paywayList[0].balance = res.credit_7;
					this.paywayList[1].balance = res.credit_11_ke;
				})
			},

			tipsOpen(param) {
				this.showTips = param;
			},
			tipsClose(param) {
				this.showTips = param;
			},
			onPaywayItem(param) {
				this.paywayList.forEach((item) => {
					item.status = false;
					if (item.id == param.id) {
						item.status = true;
						this.payway = {
							id: item.id,
							title: item.title,
							credit: item.credit,
							status: item.status,
							balance: item.balance,
						}
					}
				})
			},
			getParams() {
				this.$post({
					module: "Finance",
					interface: "7000",
				}).then(res => {
					this.params = res.params["credit_11-credit_3"];
				})
			},
			onTipsBtn() {
				if (!this.amount) {
					uni.showToast({
						icon: "none",
						title: "请输入转入数量",
						duration: 1500
					})
					return;
				}
				this.$post({
					module: "Finance",
					interface: "7001",
					data: {
						fromCredit: this.payway.credit,
						amount: this.amount,
					},
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: "操作成功",
						duration: 1500
					})
					this.showTips = false;
					this.getInfo();
					this.getParams();
				}).catch(() => {
					this.showTips = false;
				})
			},
			goSale() {
				uni.switchTab({
					url: "/pages/easy/index"
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.topHead {
		background-color: #ffffff;
		height: 88rpx;
		width: 100%;
		padding: 0 32rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			position: absolute;
			top: 22rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.right {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #F2615F;
		}
	}

	.balanceBox {
		margin: 24rpx auto 0;
		width: 690rpx;
		height: 294rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-image: url("http://www.bobei.shop/static/third/balanceBoxBeanBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 50rpx;

		.balance {
			flex-direction: column;

			.balanceTop {
				margin: 0 auto;

				.bean4 {
					width: 40rpx;
					height: 40rpx;
				}

				.balanceTopText {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 16rpx;
				}
			}

			.balanceBom {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 36rpx;
			}
		}

		.rechargeBtnBox {
			padding: 0 64rpx;

			.rechargeBtn {
				padding: 0;
				margin: 0;
				border: none;
				margin-top: 46rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				width: 152rpx;
				height: 48rpx;
				background: #F37171;
				border-radius: 24rpx;
			}
		}
	}

	.iptBox {
		margin-top: 34rpx;
		padding: 0 30rpx;

		.iptTitle {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			white-space: nowrap;
		}

		.ipt {
			width: 584rpx;
			height: 52rpx;
			background: #F9F9F9;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-left: 40rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			padding: 0 34rpx;
		}
	}

	.fee {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #F2615F;
		text-align: right;
		margin-top: 74rpx;
		padding: 0 30rpx;
	}

	.completeBtnBox {
		margin-top: 120rpx;

		.completeBtn {
			width: 630rpx;
			height: 100rpx;
			background: #F2615F;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 0;
			border: none;
			margin-bottom: 32rpx;
			position: relative;

			.lineBox {
				position: absolute;
				top: 12rpx;
				left: 42rpx;

				.line {
					width: 17rpx;
					height: 3rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
				}

				.line2 {
					width: 55rpx;
					height: 3rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	.recordBtnBox {
		width: 100%;
		justify-content: flex-end;
		padding: 0 30rpx;

		.recordBtn {
			padding: 0;
			margin: 0;
			border: none;
			color: #999999;
			font-size: 28rpx;
		}
	}

	.tips {
		margin-top: 32rpx;
		padding: 0 48rpx 0 52rpx;

		.tipsStar {
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #F2615F;
		}

		.tipsText {
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}












	.tipsBox {
		width: 550rpx;
		background: #ffffff;
		border-radius: 32rpx;
		padding: 52rpx 40rpx 30rpx 26rpx;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 40rpx;
		}

		.amount {
			width: 100%;
			margin: 20rpx;

			.amountL {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.amountR {
				width: 60%;
				height: 72rpx;
				background: #f9f9f9;
				border-radius: 52rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				padding: 0 26rpx
			}
		}

		.transfe {
			justify-content: flex-end;

			.transfeL {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.transfeR {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
				line-height: 40rpx;
			}
		}

		.payway {
			padding: 32rpx 32rpx 0;
			border-radius: 16rpx;

			.paywayTitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}

			.paywayList {
				padding-top: 8rpx;

				.paywayItem {
					flex: 1;

					.paywayItemL {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-left: 4rpx;
						padding-bottom: 8rpx;
					}

					.paywayItemR {
						.choose {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.paywayItem:nth-last-of-type(1) {
					margin-bottom: 0;
				}
			}
		}

		.gain {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-top: 42rpx;
		}

		.tipsBtn {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 40rpx;
			width: 200rpx;
			height: 72rpx;
			background: #F2615F;
			border-radius: 52rpx;
			padding: 0;
			margin: 10rpx auto 0;
			border: none;
		}
	}

	.passTipsBox {
		width: 550rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.tipsText {
			margin-top: 30rpx;

			.safeword {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				width: 100%;
				height: 60rpx;
				border: 1px solid #333333;
				border-radius: 16rpx;
				padding-left: 10rpx;
			}
		}

		.tipsBtnBox {
			width: 100%;
			margin-top: 30rpx;

			button {
				padding: 0;
				margin: 0;
				width: 200rpx;
				height: 72rpx;
				border-radius: 52rpx;
				font-size: 28rpx;
			}

			.tipsCloseBtn {
				color: #F2615F;
				border: 2rpx solid #F2615F;
			}

			.tipsSureBtn {
				color: #ffffff;
				border: none;
				background: #F2615F;
			}
		}
	}
</style>
